<template>
  <div class="home">
    <Header></Header>
    <div class="w1000 home-main">
      <div class="es left">
        <h2>ES6</h2>
        <ul>
          <li>
            Let和Const命令
          </li>
        </ul>
      </div>

      <div class="vue">
        <h2>VUE</h2>
        <ul>
          <li>
            <router-link to="Directive">
              Directive 指令 >
            </router-link>
          </li>
          <li>
            <router-link to="Form">
              Form 表单 >
            </router-link>
          </li>
          <li>
            <router-link to="Watch">
              Watch 监听器 >
            </router-link>
          </li>
          <li>
            <router-link to="Cli">
              Vue Cli >
            </router-link>
          </li>
          <li>
            <router-link to="Router">
              vue-router >
            </router-link>
          </li>
          <li>
            <router-link to="Vuex">
              Vuex >
            </router-link>
          </li>
        </ul>
      </div>

      <div class="problem">
        <h2>常见问题</h2>
        <ul>
          <li>JS</li>
        </ul>
      </div>

    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import Header from '@/components/header.vue'

export default {
  name: 'Home',
  components: {
    Header
  }
}
</script>

<style scoped lang="scss">
	.home {
		// text-align: center;
      .home-main {
        display: flex;
        > div{
          width: 33.33%;
          overflow: hidden;
        }
      }
	}
</style>